<template>
  <div>
    <article class="main-breadcrumb">
      <el-breadcrumb separator="/" class="main-breadcrumb-wrap">
        <el-breadcrumb-item>
          <span class="main-breadcrumb-home">人员定位</span>
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <span class="main-breadcrumb-home">位置查询</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </article>
    <div class="nx-content">
      <div class="flex-bet">
        <div class="left-title flex"></div>
        <el-form ref="searchForm" :inline="true" :model="searchForm" class="demo-form-inline">
          <el-form-item label="">
            <el-select v-model="searchForm.examinationRoomId" placeholder="请选择考场名称" clearable @change="schoolChange">
              <el-option v-for="item in schoolArray" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-select v-model="searchForm.mapId" placeholder="请选择地图名称" clearable @change="onSubmit">
              <el-option v-for="item in mapArray" :key="item.id" :label="item.mapName" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button v-allow="'020301'" type="primary" @click="onSubmit">查询</el-button>
            <el-button v-allow="'020301'" @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="content">
        <img id="myImg" style="width: 100%; pointer-events: none" :src="mapImage" alt="" />
        <div class="point" v-for="(item, index) in studentPoints" :key="index" :style="{ position: 'absolute', left: item.locationLabelCoordinate.xvalue + '%', bottom: item.locationLabelCoordinate.yvalue + '%' }">
          <div class="tip">
            <div>学号：{{ item.studentCode }}</div>
            <div>姓名：{{ item.studentName }}</div>
            <div>电量：{{ item.locationLabelRedis.power }}{{ item.locationLabelRedis.unit }}</div>
            <div>
              定位器：
              <span v-if="item.status == 0" class="nx-success">在线</span>
              <span v-if="item.status == 1" class="nx-del">离线</span>
            </div>
          </div>
        </div>
        <canvas id="mycanvas" :width="imgClientWidth" :height="imgClientHeight"></canvas>
      </div>
    </div>
  </div>
</template>
<script>
import { getLocationMapSets, getLocationMaps } from '@/api/personLocation'
import { getSchoolInfos } from '@/api/school'

export default {
  components: {},
  // 表格数据
  data() {
    return {
      // 查询字段
      searchForm: {
        examinationRoomId: '1',
        mapId: ''
      },
      mapImage: '', // 标注图片
      dots: [], //坐标数组
      schoolArray: [], // 考场集合
      studentPoints: [], // 学生点位
      mapArray: [], // 地图集合
      userType: '', // 用户类型（0超级管理员，1考场管理员）
      examinationRoomId: '', // 考场id
      imgClientWidth: 0, // 图片宽度
      imgClientHeight: 0, // 图片高度
      activeIndex: -1
    }
  },
  // 初始化加载
  mounted() {
    this.userType = Number(window.localStorage.getItem('userType'))
    this.examinationRoomId = Number(window.localStorage.getItem('examinationRoomId'))
    if (this.userType == 1) {
      this.searchForm.examinationRoomId = this.examinationRoomId
    }

    // 获取地图列表
    this.getLocationMaps()

    // 查询
    setTimeout(() => {
      this.getList()
    }, 1000)

    // 获取考场列表
    this.getSchoolInfos()
  },
  // 自定义方法
  methods: {
    // 查询
    onSubmit() {
      this.getList()
    },
    // 分页查询
    refresh() {
      this.getList()
    },
    // 重置
    resetForm() {
      this.searchForm = {
        mapId: '',
        examinationRoomId: ''
      }

      if (this.userType == 1) {
        this.searchForm.examinationRoomId = this.examinationRoomId
      }

      this.date = []
      this.onSubmit()
    },
    // 查询列表
    getList() {
      this.dots = []
      this.studentPoints = []
      getLocationMapSets(this.searchForm).then((res) => {
        if (res.code == 200) {
          if (this.mapImage == '') {
            this.$message({
              type: 'error',
              message: '没有上传地图资源不能进行操作!'
            })
          } else {
            res.data.forEach((item) => {
              item.locationMapSets.forEach((val) => {
                this.dots.push({
                  setJsonString: JSON.parse(val.setJsonString),
                  color: val.color
                })
              })
              item.list.forEach((val) => {
                if (val.locationLabelCoordinate != null && val.locationLabelRedis != null) {
                  this.studentPoints.push(val)
                }
              })
            })
            this.$nextTick(() => {
              this.loadBacImg()
            })
          }
        }
      })
    },
    loadBacImg() {
      setTimeout(() => {
        var myImg = document.querySelector('#myImg')
        this.imgClientWidth = myImg.clientWidth
        this.imgClientHeight = myImg.clientHeight

        this.$nextTick(() => {
          this.initCanvas()
        })
      }, 100)
    },
    initCanvas() {
      let canvas = document.getElementById('mycanvas')
      let a = setInterval(() => {
        // 重复获取
        canvas = document.getElementById('mycanvas')
        if (!canvas) {
          return false
        } else {
          clearInterval(a)
          let ctx = canvas.getContext('2d')
          this.clearCanvas(ctx, canvas)
          this.dots.forEach((item) => {
            ctx.beginPath()
            ctx.moveTo((item.setJsonString[0].x / 100) * this.imgClientWidth, this.imgClientHeight - (item.setJsonString[0].y / 100) * this.imgClientHeight)
            item.setJsonString.forEach((val, index) => {
              if (index == 0) return
              ctx.lineTo((val.x / 100) * this.imgClientWidth, this.imgClientHeight - (val.y / 100) * this.imgClientHeight)
            })
            ctx.lineTo((item.setJsonString[0].x / 100) * this.imgClientWidth, this.imgClientHeight - (item.setJsonString[0].y / 100) * this.imgClientHeight)
            ctx.lineWidth = 2
            ctx.strokeStyle = `${item.color}`
            ctx.fillStyle = 'rgba(43,100,206,0.6)'
            ctx.stroke()
            ctx.closePath()
            ctx.fill()
          })
        }
      }, 1)
    },
    clearCanvas(ctx, canvas) {
      ctx.clearRect(0, 0, canvas.width, canvas.height)
    },
    // 获取考场列表
    getSchoolInfos() {
      getSchoolInfos({}).then((res) => {
        if (res.code == 200) {
          if (res.data.length > 0) {
            this.searchForm.examinationRoomId = res.data[0].id
          }
          this.schoolArray = res.data
        }
      })
    },
    // 考场下拉切换
    schoolChange() {
      this.searchForm.mapId = ''
      this.mapArray = []

      // 获取角色列表
      this.getLocationMaps()

      this.getList()
    },
    // 获取地图列表
    getLocationMaps() {
      getLocationMaps({ id: this.searchForm.examinationRoomId }).then((res) => {
        if (res.code == 200) {
          if (res.data.length > 0) {
            this.searchForm.mapId = res.data[0].id
            this.mapImage = res.data[0].mapImage
            this.mapArray = res.data
          }
        }
      })
    },
    // 学生信息显示状态
    handleShow(index) {
      if (this.activeIndex !== index) {
        this.activeIndex = index
      } else {
        this.activeIndex = -1
      }
    }
  }
}
</script>
<style lang="less" scoped>
.main-breadcrumb {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 76px;
  border-bottom: solid 20px #f2f2f2;
  padding-left: 20px;

  .main-breadcrumb-wrap {
    font-size: 16px;
    line-height: 68px;

    .main-breadcrumb-home {
      cursor: pointer;
      color: #666666;
      font-weight: bold;
    }

    .main-breadcrumb-sp {
      color: #666666;
      font-weight: bold;
    }
  }
}

.content {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  position: relative;

  .point {
    width: 18px;
    height: 25px;
    z-index: 9999;
    position: relative;
    background: url(../../../assets/point.png) center center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    cursor: pointer;

    .tip {
      width: 98px;
      height: 68px;
      display: none !important;
      position: absolute;
      top: -267%;
      left: -020%;
      background: url(../../../assets/tip.png) center center;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      color: white;
      font-size: 8px;
      display: flex;
      flex-direction: column;
      // justify-content: space-around;
      // padding: 0 0px 0px 1px;
    }
  }

  .point:hover .tip {
    display: block !important;
  }

  img {
    z-index: 9;
  }

  #mycanvas {
    z-index: 999;
    position: absolute;
    top: 0;
    left: 0;
  }
}
</style>
